<script setup lang="ts">
import DataTable from '@/components/DataTable.vue'

import { ref } from 'vue'

const users = ref([
  { name: '张三', email: 'zhangsan@example.com', role: '管理员' },
  { name: '李四', email: 'lisi@example.com', role: '用户' },
])

const columns = ref([
  { key: 'name', label: '姓名' },
  { key: 'email', label: '邮箱' },
  { key: 'role', label: '角色' },
])
</script>

<template>
  <div class="slots-demo">
    <DataTable :colums="columns" :data="users">
      <template #header="{ colums }">
        <th v-for="column in colums" :key="column.key">
          {{ column.label }}
        </th>
      </template>
      <template #row="{ item }">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.role }}</td>
      </template>
    </DataTable>
  </div>
</template>

<style scoped lang="scss"></style>
